<template>
  <div class="ai-message-renderer">
    <!-- AI回复消息 -->
    <div v-if="message.messageType === 'AI_REPLY'" class="ai-reply-message">
      <div class="ai-badge">
        <el-icon><MagicStick /></el-icon>
        AI助手
      </div>
      <div class="message-content" v-html="formatContent(message.content)"></div>
      <div v-if="message.metadata?.suggestions" class="suggestions">
        <div class="suggestion-title">相关建议：</div>
        <el-tag
          v-for="(suggestion, index) in message.metadata.suggestions"
          :key="index"
          size="small"
          class="suggestion-tag"
        >
          {{ suggestion }}
        </el-tag>
      </div>
    </div>

    <!-- AI会议总结 -->
    <div v-else-if="message.messageType === 'AI_SUMMARY'" class="ai-summary-message">
      <div class="summary-header">
        <el-icon><Document /></el-icon>
        <span>会议总结</span>
      </div>
      <div class="summary-content">
        <div v-html="formatContent(message.content)"></div>
        
        <div v-if="message.metadata?.keyPoints" class="section">
          <h4>关键讨论点</h4>
          <ul>
            <li v-for="(point, index) in message.metadata.keyPoints" :key="index">
              {{ point }}
            </li>
          </ul>
        </div>
        
        <div v-if="message.metadata?.decisions" class="section">
          <h4>决策事项</h4>
          <ul>
            <li v-for="(decision, index) in message.metadata.decisions" :key="index">
              {{ decision }}
            </li>
          </ul>
        </div>
        
        <div v-if="message.metadata?.actionItems" class="section">
          <h4>待办任务</h4>
          <ul>
            <li v-for="(item, index) in message.metadata.actionItems" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- AI提取的任务 -->
    <div v-else-if="message.messageType === 'AI_TASK'" class="ai-task-message">
      <div class="task-header">
        <el-tag :type="getTaskPriorityType(message.metadata?.priority)" size="large">
          {{ getPriorityEmoji(message.metadata?.priority) }} 任务
        </el-tag>
      </div>
      <div class="task-content">
        <h3>{{ message.metadata?.taskTitle }}</h3>
        <p class="task-description">{{ message.metadata?.taskDescription }}</p>
        <div class="task-meta">
          <div class="meta-item">
            <span class="label">负责人：</span>
            <span>{{ message.metadata?.assignee || '待分配' }}</span>
          </div>
          <div class="meta-item">
            <span class="label">截止时间：</span>
            <span>{{ message.metadata?.deadline || '待定' }}</span>
          </div>
          <div class="meta-item">
            <span class="label">优先级：</span>
            <el-tag :type="getTaskPriorityType(message.metadata?.priority)" size="small">
              {{ message.metadata?.priority || 'MEDIUM' }}
            </el-tag>
          </div>
        </div>
        <div class="task-actions">
          <el-button size="small" type="primary">接受任务</el-button>
          <el-button size="small">分配给他人</el-button>
        </div>
      </div>
    </div>

    <!-- 普通文本消息 -->
    <div v-else class="text-message">
      {{ message.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { MagicStick, Document } from '@element-plus/icons-vue'
import type { Message } from '@/api/message'

interface Props {
  message: Message
}

const props = defineProps<Props>()

const formatContent = (content: string) => {
  // 简单的Markdown格式化
  return content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n/g, '<br>')
}

const getPriorityEmoji = (priority: string) => {
  switch (priority) {
    case 'HIGH':
    case 'URGENT':
      return '🔴'
    case 'MEDIUM':
      return '🟡'
    default:
      return '🟢'
  }
}

const getTaskPriorityType = (priority: string) => {
  switch (priority) {
    case 'HIGH':
    case 'URGENT':
      return 'danger'
    case 'MEDIUM':
      return 'warning'
    default:
      return 'success'
  }
}
</script>

<style scoped lang="scss">
.ai-message-renderer {
  .ai-reply-message {
    .ai-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 12px;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .message-content {
      margin-bottom: 12px;
      line-height: 1.6;
    }

    .suggestions {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #eee;

      .suggestion-title {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
      }

      .suggestion-tag {
        margin-right: 8px;
        margin-bottom: 4px;
      }
    }
  }

  .ai-summary-message {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;

    .summary-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #409eff;
      margin-bottom: 16px;
    }

    .summary-content {
      .section {
        margin-top: 16px;

        h4 {
          font-size: 14px;
          color: #333;
          margin-bottom: 8px;
        }

        ul {
          padding-left: 20px;
          margin: 0;

          li {
            margin-bottom: 4px;
            color: #666;
          }
        }
      }
    }
  }

  .ai-task-message {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: white;

    .task-header {
      margin-bottom: 12px;
    }

    .task-content {
      h3 {
        font-size: 16px;
        margin: 0 0 8px 0;
        color: #333;
      }

      .task-description {
        color: #666;
        margin-bottom: 16px;
        line-height: 1.6;
      }

      .task-meta {
        background: #f5f5f5;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 12px;

        .meta-item {
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            font-weight: 500;
            color: #666;
          }
        }
      }

      .task-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  .text-message {
    line-height: 1.6;
  }
}
</style>
